<template>
  <div class="dict-example">
    <h3>字典使用示例</h3>
    
    <!-- 方式1: 使用全局方法 -->
    <div class="example-section">
      <h4>方式1: 全局方法 ($getDictList)</h4>
      <v-btn @click="loadDictByGlobal" color="primary">
        加载字典 (no_yes)
      </v-btn>
      <div v-if="globalDictList.length > 0" class="mt-2">
        <v-chip
          v-for="item in globalDictList"
          :key="item.dictValue"
          class="ma-1"
          color="blue"
          text-color="white"
        >
          {{ item.dictName }}: {{ item.dictValue }}
        </v-chip>
      </div>
    </div>

    <!-- 方式2: 使用 Composition API Hook -->
    <div class="example-section">
      <h4>方式2: Composition API Hook (useDict)</h4>
      <v-btn @click="loadDictByHook" color="secondary" :loading="dictLoading">
        加载字典 (user_type)
      </v-btn>
      <div v-if="hookDictList.length > 0" class="mt-2">
        <v-chip
          v-for="item in hookDictList"
          :key="item.dictValue"
          class="ma-1"
          color="green"
          text-color="white"
        >
          {{ item.dictName }}: {{ item.dictValue }}
        </v-chip>
      </div>
    </div>

    <!-- 方式3: 使用单个字典Hook -->
    <div class="example-section">
      <h4>方式3: 单个字典Hook (useSingleDict)</h4>
      <div v-if="singleDictLoading">加载中...</div>
      <div v-else-if="singleDictError" class="error">{{ singleDictError }}</div>
      <div v-else-if="singleDictList.length > 0">
        <v-chip
          v-for="item in singleDictList"
          :key="item.dictValue"
          class="ma-1"
          color="orange"
          text-color="white"
        >
          {{ item.dictName }}: {{ item.dictValue }}
        </v-chip>
      </div>
    </div>

    <!-- 字典转换示例 -->
    <div class="example-section">
      <h4>字典转换示例</h4>
      <v-text-field
        v-model="testValue"
        label="输入字典值"
        placeholder="例如: 0 或 1"
        @input="convertValue"
      />
      <div v-if="convertedName" class="mt-2">
        <v-alert type="info">
          值 "{{ testValue }}" 对应的名称是: "{{ convertedName }}"
        </v-alert>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, getCurrentInstance } from 'vue';
import { useDict, useSingleDict } from '@/composables/useDict';
import type { DictItem } from '@/utils/dict';

// 全局方法示例
const globalDictList = ref<DictItem[]>([]);

// Hook示例
const { getDictList, loading: dictLoading } = useDict();
const hookDictList = ref<DictItem[]>([]);

// 单个字典Hook示例 (自动加载 no_yes 字典)
const { 
  dictList: singleDictList, 
  loading: singleDictLoading, 
  error: singleDictError,
  getNameByValue 
} = useSingleDict('no_yes');

// 字典转换示例
const testValue = ref('');
const convertedName = ref('');

// 获取当前实例以使用全局方法
const instance = getCurrentInstance();

/**
 * 使用全局方法加载字典
 */
const loadDictByGlobal = async () => {
  if (instance) {
    try {
      const list = await instance.proxy?.$getDictList('no_yes');
      globalDictList.value = list || [];
    } catch (error) {
      console.error('加载字典失败:', error);
    }
  }
};

/**
 * 使用Hook加载字典
 */
const loadDictByHook = async () => {
  try {
    const list = await getDictList('user_type');
    hookDictList.value = list;
  } catch (error) {
    console.error('加载字典失败:', error);
  }
};

/**
 * 转换字典值
 */
const convertValue = () => {
  if (testValue.value) {
    convertedName.value = getNameByValue(testValue.value) || '未找到对应名称';
  } else {
    convertedName.value = '';
  }
};
</script>

<style scoped>
.dict-example {
  padding: 20px;
}

.example-section {
  margin-bottom: 30px;
  padding: 15px;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
}

.example-section h4 {
  margin-bottom: 15px;
  color: #1976d2;
}

.error {
  color: #f44336;
  font-weight: bold;
}
</style> 